<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #table,#table2{
            width:600px;
            height:280px;
            text-align: center;
            line-height: 80px;
            margin:20px;
        }
    </style>
</head>
<body>
<button type = "button" onclick = "add()">add</button>
<button type = "button" onclick = "add2()">add2</button>
<table id="table"  >

</table>

<table id = "table2" border = "2">

</table>
<script>
    function add(){
        let table = document.getElementById("table")
        let row = table.insertRow(0)

        let c1 = row.insertCell(0)
        let c2 = row.insertCell(1)

        c1.setAttribute("id","content1")
        c2.setAttribute("id","content2")


    }

    function add2(){
        var len = 0
        var count = 4

        for(let i = 1;i<= count/2 ;i++){ // 0 1 2 3
            var table = document.getElementById("table2")
            var row = table.insertRow(len)
            var c1 = row.insertCell(0)
            var c2 = row.insertCell(1)

            c1.setAttribute("id","content" + Number(len * 2 + 1) )
            c2.setAttribute("id","content" + Number(len * 2 + 2))
            len++
        }
    }
</script>
</body>
</html>